<div>
  <p-table
    [value]="customers"
    [lazy]="true"
    (onLazyLoad)="loadCustomers($event)"
    [showCurrentPageReport]="true"
    frozenWidth="400px"
    [resizableColumns]="true"
    [style]="{ 'min-width': '800px' }"
    [scrollable]="true"
    scrollHeight="600px"
    currentPageReportTemplate="从 {first} 到 {last} ，总共 {totalRecords} 项"
    [paginator]="true"
    [rows]="25"
    [totalRecords]="totalRecords"
    [loading]="loading"
    [rowsPerPageOptions]="[25, 50, 75, 100]"
    styleClass="p-datatable-striped p-datatable-gridlines"
    [columns]="scrollableCols"
    [frozenColumns]="frozenCols"
  >
    <ng-template pTemplate="colgroup" let-columns>
      <colgroup>
        <col *ngFor="let col of columns; index as i" [style]="{width:((columns.length==2&& i==0)?'50px':'300px')}" />
      </colgroup>
    </ng-template>
    <ng-template pTemplate="header" let-columns>
      <tr>
        <th pResizableColumn *ngFor="let col of columns">
          {{ col.header }}
        </th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-customer let-columns="columns">
      <tr>
        <td *ngFor="let col of columns">
          {{ customer[col.field] }}
        </td>
      </tr>
    </ng-template>
    <!--<ng-template pTemplate="header">
      <tr>
        <th pResizableColumn>Id</th>
        <th pResizableColumn>Name</th>
        <th pResizableColumn>Country</th>
        <th pResizableColumn>Company</th>
        <th pResizableColumn>Date</th>
        <th pResizableColumn>Representative</th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-customer>
      <tr>
        <td>{{ customer.id }}</td>
        <td>{{ customer.name }}</td>
        <td>{{ customer.country.name }}</td>
        <td>{{ customer.company }}</td>
        <td>{{ customer.date }}</td>
        <td>{{ customer.representative.name }}</td>
      </tr>
    </ng-template> -->
  </p-table>
</div>
